<template>
    <view v-if="isLoad">
        <!-- <back></back> -->
        <view v-if="isWechatAgent">
            <view class="text-section">
                <view>点击复制网址去浏览器中打开</view>
                <view class="pl-lg pr-lg mt-sm ml-lg mr-lg f-paragraph c-desc ellipsis">{{
                    link
                }}</view>
            </view>
            <view class="button-section">
                <button class="button copy" @click="copyLink">点击复制</button>
                <!-- <button class="button off" @click="goDetail">完成支付</button> -->
            </view>
        </view>
        <view v-else>
            <view class="text-section">
                <view>{{ content }}</view>
            </view>
            <view class="alipaysubmit" v-html="alipayOrderParams.orderInfo"></view>
        </view>
    </view>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import siteInfo from "@/siteinfo.js";
export default {
    components: {},
    data() {
        return {
            options: {},
            isLoad: false,
            isWechatAgent: false,
            link: "",
            content: "正在支付中",
        };
    },
    onLoad(options) {
        this.options = options;
        this.initIndex();
    },
    computed: mapState({
        primaryColor: (state) => state.config.configInfo.primaryColor,
        subColor: (state) => state.config.configInfo.subColor,
        commonOptions: (state) => state.user.commonOptions,
        userInfo: (state) => state.user.userInfo,
        autograph: (state) => state.user.autograph,
        alipayOrderParams: (state) => state.order.alipayOrderParams,
    }),
    methods: {
        ...mapActions(["getConfigInfo", "getMineInfo"]),
        ...mapMutations(["updateUserItem", "updateOrderItem"]),
        async initIndex() {
            let isWechatAgent = await this.$jweixin.isWechat();
            if (isWechatAgent) {
                await this.$jweixin.initJssdk();
                this.$jweixin.wxReady(() => {
                    this.$jweixin.hideOptionMenu();
                });
            }
            this.isWechatAgent = isWechatAgent;

            let { autograph } = this.options;
            if (autograph) {
                this.updateUserItem({
                    key: "autograph",
                    val: autograph,
                });
                await this.toRePay();
                return;
            }
            await this.formatLink();
            this.isLoad = true;
        },
        async formatLink() {
            let { siteroot } = siteInfo;
            let url = siteroot.split("/index.php")[0];
            let { autograph } = this;
            let { order_id, card_id = 0, coach_id = 0 } = this.alipayOrderParams;
            let coach_params = card_id ? `&cid=${card_id}&coach=${coach_id}` : ``;
            let link = `${url}/h5/#/user/pages/alipay-result?autograph=${autograph}&id=${order_id}${coach_params}`;
            this.link = link;
        },
        async toRePay() {
            let { id, cid = 0, coach = 0 } = this.options;

            let param = cid
                ? {
                      card_id: cid,
                      coach_id: coach,
                      pay_model: 3,
                  }
                : {
                      id,
                  };

            let methodKey = cid ? "mine" : "order";
            let methodModel = cid ? "payBalanceOrder" : "rePayOrder";
            let { pay_list } = await this.$api[methodKey][methodModel](param);

            if (pay_list) {
                let alipayOrderParams = Object.assign(
                    {},
                    {
                        orderInfo: pay_list,
                        provider: "alipay",
                    },
                    this.options
                );
                this.updateOrderItem({
                    key: "alipayOrderParams",
                    val: alipayOrderParams,
                });
                this.isLoad = true;
                this.$nextTick(() => {
                    document.getElementById("alipaysubmit").submit();
                });
            }
        },
        copyLink() {
            let { link: url } = this;
            this.$util.goUrl({
                url,
                openType: "copy",
            });
        },
        goDetail() {
            let { page_url: url } = this.alipayOrderParams;
            this.$util.goUrl({
                url,
                openType: `reLaunch`,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
page {
    background-color: #ffffff;
}

.alipaysubmit {
    display: none;
}

.text-section {
    padding-top: 148rpx;
    margin-top: 185rpx;
    background: url("")
        center top/280rpx 98rpx no-repeat;
    font-weight: bold;
    font-size: 32rpx;
    text-align: center;
    color: #111111;
}

.button-section {
    margin-top: 95rpx;
    margin-right: 98rpx;
    margin-left: 98rpx;

    .button {
        height: 80rpx;
        border-radius: 40rpx;
        font-size: 30rpx;
        line-height: 80rpx;

        ~ .button {
            margin-top: 32rpx;
        }

        &.copy {
            background-color: #333333;
            color: #ffffff;
        }

        &.off {
            border: 2rpx solid #999999;
            color: #666666;
        }
    }
}

.hint {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 156rpx;
    padding-left: 144rpx;
    background: url("")
        calc(100% - 32rpx) 12rpx/229rpx 178rpx no-repeat;
    font-weight: 500;
    font-size: 30rpx;
    line-height: 68rpx;
    color: #c1c1c1;
    background-color: rgba(0, 0, 0, 0.8);

    .iconfont {
        margin-left: 10rpx;
        font-weight: bold;
        font-size: 30rpx;
    }
}
</style>
